<?xml version="1.0" ?>
<jsp:root 	xmlns:jsp="http://java.sun.com/JSP/Page"
			xmlns:sql="http://java.sun.com/jsp/jstl/sql"
			xmlns:c="http://java.sun.com/jsp/jstl/core" 
			version="2.1">
	<jsp:directive.page contentType="text/html; charset=UTF-8" />
	<jsp:directive.page isELIgnored="false" />
	<jsp:output omit-xml-declaration="false"
		doctype-root-element="html"
		doctype-public="-//W3C//DTD XHTML 1.1//EN"
		doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd" /> 	
	<jsp:directive.page import="es.albarregas.modelo.ModelFacade"/>
	<jsp:directive.page import="es.albarregas.modelo.User" />
	<jsp:directive.page import="es.albarregas.modelo.Producto" />
	
	
		
	<jsp:useBean id="userBean" class="es.albarregas.beans.UserBean" scope="session" />	
	
	<jsp:useBean id="productList" class="es.albarregas.beans.ProductListBean" scope="session" />
	<jsp:useBean id="categoriesList" class="es.albarregas.beans.CategoriaListBean" scope="session" />
	<jsp:useBean id="brandList" class="es.albarregas.beans.MarcaListBean" scope="session" />
	
	<jsp:useBean id="productForm" class="es.albarregas.beans.ProductoBean" scope="page" />
	
    
 	

<html>
<head>
  	<title>Ikex Administración | Productos</title>
  	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<!-- Apple iOS and Android stuff -->
	<meta name="apple-mobile-web-app-capable" content="no"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
	<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"/>
	<!-- Apple iOS and Android stuff - don't remove! -->
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1"/>
	
	<link rel="shortcut icon" href="${pageContext.request.contextPath}/images/favicon.png" ></link>
	
			
	<script src="${pageContext.request.contextPath}/js/jquery.min.js"  ><jsp:text></jsp:text></script>
	<script type="text/javascript" language="javascript" src="${pageContext.request.contextPath}/js/jquery.dataTables.js"><jsp:text></jsp:text></script>
	<script type="text/javascript" charset="utf-8">
			$(document).ready(function() {
				$('#example').dataTable();
			} );
			
		</script>
	<!-- Librería JQuery para validación de formularios -->
    <script src="${pageContext.request.contextPath}/js/jquery-validate.js"><jsp:text /></script>
	
	<link href="${pageContext.request.contextPath}/css/admin/icofont.css" type="text/css" rel="stylesheet" />
	<link href="${pageContext.request.contextPath}/css/admin/default.css" type="text/css" rel="stylesheet" />
	<link href="${pageContext.request.contextPath}/css/admin/datatables.css" type="text/css" rel="stylesheet" />
			
			
			
	<link href="${pageContext.request.contextPath}/css/admin/fonts.css" type="text/css" rel="stylesheet" />
	<link href="${pageContext.request.contextPath}/css/admin/ie9.css" type="text/css" rel="stylesheet" />
	<link href="${pageContext.request.contextPath}/css/admin/flags.css" type="text/css" rel="stylesheet" />
	<script src="${pageContext.request.contextPath}/js/admin/newStyle.js" data-wr-resname="ClearStyle-script"><jsp:text /></script>
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"><jsp:text /></script>
	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/south-street/jquery-ui.css" />
	
</head>
<body>

	<jsp:setProperty name="productForm" property="oid" param="currentOid"/>
	<jsp:setProperty name="productForm" property="nombre" param="currentName"/>
	<jsp:setProperty name="productForm" property="precio" param="currentPrice"/>
	<jsp:setProperty name="productForm" property="imagen" param="currentImage"/>
	<jsp:setProperty name="productForm" property="thumb" param="currentThumb"/>
	<jsp:setProperty name="productForm" property="fecha" param="currentDate"/>
	<jsp:setProperty name="productForm" property="descripcion" param="currentDescription"/>
	<jsp:setProperty name="productForm" property="detalle" param="currentDetail"/>
	<jsp:setProperty name="productForm" property="categoria_oid" param="current_category"/>
	<jsp:setProperty name="productForm" property="marca_oid" param="currentBrand"/>
	<jsp:setProperty name="productForm" property="medidaAncho" param="currentWide"/>
	<jsp:setProperty name="productForm" property="medidaAlto" param="currentHeight"/>
	<jsp:setProperty name="productForm" property="medidaFondo" param="currentDepth"/>
	<jsp:setProperty name="productForm" property="destacado" param="currentHighlight"/>
	<jsp:setProperty name="productForm" property="stock" param="currentStock"/>
	<jsp:setProperty name="productForm" property="stockMinimo" param="currentMinStock"/>
	


	<div id="wrapper">		
		<aside class="sidebar sidebarSx">
			<header>
				<div id="logo">
					<a href="${pageContext.request.contextPath}/admin/index.jsp"><img src="${pageContext.request.contextPath}/images/logo-ikex.png" alt="Logo Ikex" height="48" /></a>
				</div>
			</header>
			<div>Bienvenido ${userBean.username } | <a href="${pageContext.request.contextPath}/logout" role="button" data-toggle="modal">Logout</a></div>
			<nav>
				<ul class="menu">
					<li class=""><a class="" href="${pageContext.request.contextPath}/admin/index.jsp">Inicio</a></li>
					<li class=""><a class="" href="${pageContext.request.contextPath}/admin/users.jsp">Usuarios</a></li>
					<li class="current"><a class="" href="${pageContext.request.contextPath}/admin/products.jsp">Productos</a></li>
					<li><a class="" href="${pageContext.request.contextPath}/admin/categories.jsp">Categorías</a></li>
					<li class=""><a class="" href="${pageContext.request.contextPath}/admin/brands.jsp">Marcas</a></li>
				</ul>
			</nav>
		</aside>	
		
		<!-- Page content -->
		<div id="content" style="">
			<c:if test="${listaResultados != null }">
				<ul class="resultados-list">
				<c:forEach items="${listaResultados}" var="current">
					<li><c:out value="${current }"></c:out></li>
				</c:forEach>
				</ul>
			</c:if>
			<nav>
				<ul class="breadcrumb">
					<li><a href="${pageContext.request.contextPath}/admin/index.jsp">Inicio</a></li>
					<li><a class="active" href="#">Productos</a></li>
				</ul>
			</nav>
			<section id="top">
			</section>
			<header>
				<div class="pageTitle"><h1>Productos</h1></div>
			</header>
			
			<section>
				<div class="container_12">
					<div class="grid_12 alpha omega agrd_24">
						<section class="frame" data-collapsible="false" id="lista-de-productos" >
							<header>
								<h3>Lista de productos</h3>
							</header>
							<div class="plain">
							<c:choose>
							<c:when test="${productList.product.size() > 0 }"> <!-- Si contiene elementos, construyo la tabla -->
								<div class="plain PowerIndexUnit">
									<table id="example">
									<!-- begin header -->
										<thead>
											<tr>
												<th class=" header" data-information-level="none">Oid</th>
										        <th class=" header" data-information-level="none">Nombre</th>
										        <th class=" header" data-information-level="none">Precio</th>
												<th class=" header" data-information-level="none">Categoría</th>
												<th class=" header" data-information-level="none">Stock</th>
												<th class=" header" data-information-level="none"><jsp:text /></th>
												<th class=" header" data-information-level="none"><jsp:text /></th>
											</tr>
										<!-- end header -->
										</thead>
										<tbody id="productsTable">
										<!-- instances -->
											<c:forEach var="producto" items="${productList.product}" varStatus="loopStatus"> <!-- llama al método getProducts() en ProductsListBean -->
												<tr class="${loopStatus.index % 2 == 0 ? 'rowAlternate' : 'row'}"> <!-- uso la vble loopStatus para alternar el estilo de las filas -->
													<td data-information-level="none" class=" value integer">${producto.oid}</td>
													<td data-information-level="none" class=" value string">${producto.nombre}</td>
													<td data-information-level="none" class=" value string">${producto.precio}</td>
													<td data-information-level="none" class=" value date">${producto.categoria}</td>
													<td data-information-level="none" class=" value string">${producto.stock}</td>
													<c:url var="modifyLink" value="/admin/products.jsp"> <!-- añado a la url los parámetros del producto elegido para modificar -->
														<c:param name="currentOid" value="${producto.oid}"/>
														<c:param name="currentName" value="${producto.nombre}"/>
														<c:param name="currentPrice" value="${producto.precio}"/>
														<c:param name="currentImage" value="${producto.imagen}"/>
														<c:param name="currentThumb" value="${producto.thumb}"/>
														<c:param name="currentDate" value="${producto.fecha}"/>
														<c:param name="currentDescription" value="${producto.descripcion}"/>
														<c:param name="currentDetail" value="${producto.detalle}"/>
														<c:param name="currentCategory" value="${producto.categoria_oid}"/>
														<c:param name="currentBrand" value="${producto.marca_oid}"/>
														<c:param name="currentWide" value="${producto.medidaAncho}"/>
														<c:param name="currentHeight" value="${producto.medidaAlto}"/>
														<c:param name="currentDepth" value="${producto.medidaFondo}"/>
														<c:param name="currentHighlight" value="${producto.destacado}"/>
														<c:param name="currentStock" value="${producto.stock}"/>
														<c:param name="currentMinStock" value="${producto.stockMinimo}"/>
													</c:url>
													<td class="command-column">
														<a href="${modifyLink}">
															<img src="${pageContext.request.contextPath}/images/admin/edit.png" alt="Editar producto" title="Editar" class="command-button" />
														</a>
													</td>
													
													<c:url var="deleteLink" value="/delete-product">
														<c:param name="productOid" value="${producto.oid}"/>
													</c:url>
													<td class="command-column">
														<a href="${deleteLink}" class="edit-command-button confirmation"  >
															<img src="${pageContext.request.contextPath}/images/admin/delete.png" alt="Eliminar producto" title="Eliminar" class="command-button" />
														</a>
													</td>
 												</tr>
											</c:forEach>	
										</tbody>
									</table>
								</div> <!-- powerindexunit -->
								
								</c:when>
								<c:otherwise><span>No hay elementos para mostrar</span></c:otherwise>
								</c:choose>
							</div>
						</section>
					</div>
				</div>
			
			</section>
			
			<!-- ****************************************** -->
			<br></br><br></br>
			
			<div class="grid_12 alpha omega agrd_24">
<section class="frame separate" data-collapsible="false" id="producto">
	<header>
		<h3>Usuario</h3>
	</header>
	<div>
	  <div class="plain ">
		  <div class="plain EntryUnit">
		  	<form method="post" action="${pageContext.request.contextPath}/add-product" id="productForm" enctype="multipart/form-data">
			<fieldset class=" vertical">   
			<input type="hidden" name="oid" size="25" value="${productForm.oid }" id="oid" class="wr-submitButtons:ln10  field text" />
			
	             <div class="field text" >
					<label for="nombre">Nombre de producto</label>
		             <div class="">
						<input type="text" name="nombre" size="25" value="${productForm.nombre }" class="wr-submitButtons:ln10  field text" />
	             	 </div> 
	             </div>
				     <div class="clear"></div>	
		             
		             <div class="field text" >
						<label for="precio">Precio</label>
		            	<div class="">
	    					<input type="number" name="precio" size="25" value="${productForm.precio }"  class="wr-submitButtons:ln10  field text" /> 
			             </div> 
		             </div>
			    	 <div class="clear"></div>	
		             
		             <div class="field text" >
						<label for="imagen">Imagen</label>
			            <div class="">
			            	<span style="float: left;"><c:out value="${productForm.imagen }"></c:out></span>
							<input type="file" name="imagen" size="25" value="${productForm.imagen }"  class="wr-submitButtons:ln10  field text" />
		             	</div> 
		             </div>
		             <div class="field text" >
						<label for="thumb">Miniatura</label>
			            <div class="">
			            	<span style="float: left;"><c:out value="${productForm.thumb }"></c:out></span>
							<input type="file" name="thumb" size="25" value="${productForm.thumb }"  class="wr-submitButtons:ln10  field text" />
		             	</div> 
		             </div>
		             <div class="field text">
						<label for="fecha">Fecha</label>
						<div>
							<div style="padding-right: 24px; white-space: nowrap">
								<input name="fecha" type="text" class="date-field  field text" style="width: 100%; margin: 0" id="datepicker" readonly="readonly" value="${productForm.fecha }" size="25"  />
							</div>
						</div>
					</div> <!-- field text -->
					<div class="field textarea">
						<label for="descripcion">Descripción</label>
						<textarea name="descripcion" type="text" cols="25" rows="4">${productForm.descripcion }<jsp:text /></textarea>
					</div>
					<div class="field textarea">
						<label for="detalle">Detalle</label>
						<textarea name="detalle" type="text" cols="25" rows="4">${productForm.detalle }<jsp:text /></textarea>
					</div>
					<div class="field select">
						<label for="categoria">Categoría</label>
			            <select  name="categoria">
		            		<c:forEach var="categoria" items="${categoriesList.category}"  >
		          				<option value="${categoria.oid}">${categoria.nombre}</option>
		         			</c:forEach>
	        			</select>
        			</div>
        			<div class="field select">
						<label for="marca">Marca</label>
			            <select  name="marca">
		            		<c:forEach var="marca" items="${brandList.marca}"  >
		          				<option value="${marca.oid}">${marca.nombre}</option>
		         			</c:forEach>
	        			</select>
        			</div>
        			
       				<div class="field ">
						<label for="medidaAncho">Ancho (cm.)</label>
						<input type="text" name="medidaAncho" value="${productForm.medidaAncho }"><jsp:text /></input>
					</div>
					<div class="field " >
						<label for="medidaAlto">Alto (cm.)</label>
						<input type="text" name="medidaAlto" value="${productForm.medidaAlto }"><jsp:text /></input>
						
					</div>
					<div class="field ">
						<label for="medidaFondo">Fondo (cm.)</label>
						<input type="text" name="medidaFondo" value="${productForm.medidaFondo }"><jsp:text /></input>
					</div>
					<div class="clear"></div>
					
					<c:set var="destBool" value="false"></c:set>
					<c:if test="${productForm.destacado}">
						<c:set var="destBool" value="true"></c:set>
					</c:if>
					
					<div class="field " style="font-weight: bold;">
					<c:choose>
						<c:when  test="${productForm.destacado}">
							<input type="checkbox" name="destacado" checked="checked">Destacado sí/no</input><br/><br/>
						</c:when>
						<c:otherwise>
							<input type="checkbox" name="destacado" >Destacado sí/no</input><br/><br/>
						</c:otherwise>
					</c:choose>
					</div>
					
			    	<div class="clear"></div>	
			    	<div class="field text" >
						<label for="stock">Stock</label>
		            	<div class="">
	    					<input type="number" name="stock" size="25" value="${productForm.stock }"  class="wr-submitButtons:ln10  field text" /> 
			             </div> 
		             </div>
		             <div class="clear"></div>	
			    	<div class="field text" >
						<label for="stockMinimo">Stock mínimo</label>
		            	<div class="">
	    					<input type="number" name="stockMinimo" size="25" value="${productForm.stockMinimo }"  class="wr-submitButtons:ln10  field text" /> 
			             </div> 
		             </div>
			    	 
				     <div class="clear"></div>	
		   	</fieldset>
		      <div class="buttons">
			  	<button title="Guardar" class="button  button alta"  id="button:ln10" name="button:ln10" type="submit" value="Alta">Guardar producto</button>
		      </div>
			  <div class="clear"></div>
			  </form>
			  </div>
		  </div>
	</div>
</section>
			</div>
				<div class="clear">&#160;&#160;</div>

	<jsp:setProperty name="productForm" property="*" />
			
			
			
			<!-- ****************************************** -->
			
		</div> <!-- content -->	
			
	</div> <!-- wrapper -->




</body>
</html>

<script type="text/javascript">
	var contextPath="${pageContext.request.contextPath}";
	console.log(contextPath);
</script>
<script type="text/javascript">
    $('.confirmation').on('click', function () {
        return confirm('¿Estás seguro?');
    });
</script>
<script type="text/javascript">
	jQuery(function($){
	    $.datepicker.regional['es'] = {
	          closeText: 'Cerrar',
	          prevText: '&#x3c;Ant',
	          nextText: 'Sig&#x3e;',
	          currentText: 'Hoy',
	          monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio',
	          'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
	          monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun',
	          'Jul','Ago','Sep','Oct','Nov','Dic'],
	          dayNames: ['Domingo','Lunes','Martes','Miércrcoles','Jueves','Viernes','Sábado'],
	          dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
	          dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
	          weekHeader: 'Sm',
	          dateFormat: 'dd/mm/yy',
	          firstDay: 1,
	          isRTL: false,
	          showMonthAfterYear: false,
	          yearSuffix: ''};
	    $.datepicker.setDefaults($.datepicker.regional['es']);
	}); 

	$(document).ready(function() {
	   $("#datepicker").datepicker();
	});
</script>


<script src="${pageContext.request.contextPath}/js/admin/validacion.js"><jsp:text /></script>  
</jsp:root>